// /* eslint-disable indent */
import React from 'react';

import TyTimePicker from '@ray-js/components-ty-time-picker';
import { View, Text, Image } from '@ray-js/ray';
import { DateTimePicker } from '@ray-js/smart-ui';
import { useSystemInfo } from '@/hooks/useSystemInfo';
import _ from 'lodash';
import Strings from '@/i18n';
import styles from './index.module.less';
import mh from './mh.png';

export function Picker({ time, handlePickerChange, is24 }) {
  const onTimeInput = event => {
    const { detail } = event;

    const [hour, minute] = detail.split(':').map(Number);

    handlePickerChange({
      hour,
      minute,
    });
  };

  return (
    <View className={styles.pickerContainer}>
      <DateTimePicker
        showToolbar={false}
        type="time"
        className={styles.picker}
        visibleItemCount={5}
        fontStyles={{
          '12HourClock': {
            fontSize: '14px',
            color: '#000',
          },
        }}
        columnClass={styles.columnClass}
        is12HourClock={is24}
        value={`${time.hour}:${time.minute}`}
        onInput={onTimeInput}
        amText={Strings.getLang('AM')}
        pmText={Strings.getLang('PM')}
      />
    </View>
  );
}

export default Picker;
